ngRepeat ( directive in module ng )

Description

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Special properties are exposed on the local scope of each template instance, including:

Additionally, you can also provide animations via the ngAnimate attribute to animate the enter, leave and move effects.

Usage

as attribute
<ANY ng-repeat="{repeat_expression}">
   ...
</ANY>
as class
<ANY class="ng-repeat: {repeat_expression};">
   ...
</ANY>

Directive info

  • This directive creates new scope.
  • This directive executes at priority level 1000.

Parameters

Example

This example initializes the scope to a list of names and then uses ngRepeat to display every person:

I have {{friends.length}} friends. They are:
  • [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
.example-repeat-enter-setup, .example-repeat-leave-setup, .example-repeat-move-setup { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -ms-transition:all linear 0.5s; -o-transition:all linear 0.5s; transition:all linear 0.5s; }

  .example-repeat-enter-setup {
    line-height:0;
    opacity:0;
  }
  .example-repeat-enter-setup.example-repeat-enter-start {
    line-height:20px;
    opacity:1;
  }

  .example-repeat-leave-setup {
    opacity:1;
    line-height:20px;
  }
  .example-repeat-leave-setup.example-repeat-leave-start {
    opacity:0;
    line-height:0;
  }

  .example-repeat-move-setup { }
  .example-repeat-move-setup.example-repeat-move-start { }
</file>
<file name="scenario.js">
   it('should render initial data set', function() {
     var r = using('.doc-example-live').repeater('ul li');
     expect(r.count()).toBe(10);
     expect(r.row(0)).toEqual(["1","John","25"]);
     expect(r.row(1)).toEqual(["2","Jessie","30"]);
     expect(r.row(9)).toEqual(["10","Samantha","60"]);
     expect(binding('friends.length')).toBe("10");
   });

   it('should update repeater when filter predicate changes', function() {
     var r = using('.doc-example-live').repeater('ul li');
     expect(r.count()).toBe(10);

     input('q').enter('ma');

     expect(r.count()).toBe(2);
     expect(r.row(0)).toEqual(["1","Mary","28"]);
     expect(r.row(1)).toEqual(["2","Samantha","60"]);
   });
  </file>
</example>